<template>
  <div>
    <TitleCompound :title="title" :description="description"></TitleCompound>
  </div>
  <div></div>
  <Suspense>
    <template v-slot:default>
      <AsyncRequestCompound></AsyncRequestCompound>
    </template>
    <template v-slot:fallback>
      <div>
        <el-skeleton :rows="5" animated />
        <div>加载中，请稍等</div>
      </div>
    </template>
  </Suspense>

</template>
<script lang="ts" setup>
import AsyncRequestCompound from '@/components/AsyncRequestCompound.vue';
import TitleCompound from '@/components/TitleCompound.vue';

const title = 'Suspense';
const description = `Suspense是一个组件，它可以用来处理异步请求的组件。<br>

1. 因为请求了外部服务器，CORS问题可以通过配置 <b>vite.config.ts</b>解决 <br>

<code>
export default defineConfig({ <br>
  .... <br>
  , <br>
  <span class="highlight">
  server: { <br>
    proxy: { <br>
      '/uomg': { <br>
        target: 'https://api.uomg.com', <br>
        changeOrigin: true, <br>
        secure: true, <br>
        rewrite: (path) => path.replace(/^\/uomg/, ''), <br>
      } <br>
    } <br>
  }, <br>
  </span>
})
</code>

2. Suspense使用 <br>
<code>
  &lt;Suspense&gt;<br>
    &lt;template v-slot:default&gt;<br>
      &lt;AsyncRequestCompound&gt;&lt;/AsyncRequestCompound&gt;<br>
    &lt;/template&gt;<br>
    &lt;template v-slot:fallback&gt;<br>
      <div><br>
        &lt;el-skeleton :rows="5" animated /&gt;<br>
        <div>加载中，请稍等</div><br>
      &lt;/div&gt;<br>
    &lt;/template&gt;<br>
  &lt;/Suspense&gt;<br>
</code>
`;
</script>
<style lang="scss" scoped>
.highlight {
  color: red;
  font-weight: bold;
}
</style>
